<template>
	<!-- 已登录 -->
	<div v-if="isLogin">
		<!-- 用户信息 -->		
		<div class="userinfo">
			<div >
				<u--image :src="avatar" shape="circle" width="80" height="80"/>
			</div>
			<div>
				<span class="title u-line-1">{{ user.name }}</span>
			</div>
		</div>
		<!-- 用户课操作功能列表 -->
		<u-cell-group>
			<u-cell v-for="(item, i) of cellItems" :key="i" :icon="item.img" :title="item.title" isLink 
				@click="onClick(item)"/> 
			<u-cell @click="onClickLogout" icon="backspace" title="退出登录" isLink /> 
		</u-cell-group>		
	</div> 
	<!-- 未登录 -->
	<div v-else>
		<!-- 用户信息 -->		
		<div class="userinfo">
			<div >
				<u--image :src="avatar_default" shape="circle" width="80" height="80"/>
			</div>
			<div @click = "$u.route('/pages/user/Login')">
				<span class="title u-line-1">登录 / 注册</span>
			</div>
		</div>
	</div>
</template>

<script>
	import { getStorageToken, getStorageUser,removeStorageToken} from "@/utils/storage.js"
	import * as UserAPI from "@/api/user.js";
	export default {
		data() {
			return {
				user:{},
				avatar_default: "/static/image/avatar_default.png",
				avatar: "",
				isLogin:false,
				cellItems: [{
						title: "我的订单",
						url: "/pages/order/OrderList",  // orderList
						img: "order",
					},
					{
						title: "收货地址",
						url: "/pages/address/AddressList",  //addressList
						img: "home", //
					},

					{
						title: "我的收藏",
						url: "/pages/working/Working",
						img: "star",
					},
					{
						title: "个人资料",
						url: "/pages/user/Profile",  //profile
						img: "account",
					},
					{
						title: "修改密码",
						url: "/pages/user/UpdatePwd",  //updatePwd
						img: "lock",
					},
				],
			};
		},

		//初始页面数据
		onShow() {			
			this.user = getStorageUser();
			this.avatar = this.avatar_default;
			
			//判断是否用户登录，看Token是否为空			
			let token = getStorageToken();
			this.isLogin = token ? true : false;
			
			if (this.isLogin) {
				UserAPI.getDetailById(this.user.id).then(result => {
					this.avatar = this.$fullUrl(result.data.avatar);
				});
			}
		},

		methods: {
			onClick(item){				
				uni.navigateTo({
					url:item.url,
				});
			},
			//点击用户退出事件
			onClickLogout() {
				removeStorageToken();
				this.avatar = this.avatar_default;
				uni.showToast({
					title: '退出成功',
					icon:"success",
					duration: 2000
				});				
				this.isLogin =  false;
				
				uni.reLaunch('/pages/user/User')
				
			},
		},
	};
</script>

<style lang="scss" scoped>
	.userinfo {
		@include flex;
		flex-direction: row;
		align-items: center;
		padding: 10px;
		background: linear-gradient(90deg, #28a2ff, #ffd787);
		box-shadow: 0 0.1rem 0.25rem #f8e3c6;				
		
		.title {
			padding-left: 20px;
			font-size: 24px;
			color: rgb(65, 16, 241);
		}
	}

	
</style>
